<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueCDN引入组件的方式Pinia-Router-Axios</title>
    <style>
        .container {
            padding: 0;
            margin: 0;
        }

        .container .wrap {
            margin: 0 auto;
        }

        .highlight {
            background-color: yellow;
        }

        .large-text {
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>{{ message }}</h1>
            <div class="wrap">

            </div>
        </div>
    </div>
    <script src="../lib/vue/3/vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        const options = {
            custom: 'hello!',
            data: function () {
                return {
                    message: 'Hello'
                }
            },
        }
        const myMixin = {
            methods: {
                foo() {
                    console.log('foo')
                },
                conflicting() {
                    console.log('from mixin')
                }
            }
        }

        const app = createApp({
            mixins: [options, myMixin],
            methods: {
                bar() {
                    console.log('bar')
                },
                conflicting() {
                    console.log('from self')
                }
            }
        });
        // 自定义选项合并策略
        app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
            console.log(fromVal, toVal)
            // => "goodbye!", undefined
            // => "hello", "goodbye!"
            return fromVal || toVal
        }
        // app.config.optionMergeStrategies.custom = (toVal, fromVal) => toVal || fromVal;
        // 全局混入
        app.mixin({
            custom: 'goodbye!',
            created() {
                console.log(this.$options.custom)
            }
        })

        // 挂载
        const vm = app.mount('#app');

        vm.foo() // => "foo"
        vm.bar() // => "bar"
        vm.conflicting() // => "from self"
    </script>
</body>